import React, { createRef, useEffect } from "react"
import {
  Form,
  FormInstance,
  Input,
  InputNumber,
  Modal,
  Radio,
  Row,
  Col,
  TreeSelect
} from "antd"

import { IEditProps, useMenu } from "./useMenu"
import { menuType } from "constants/dict"

const EditModal: React.FC<IEditProps> = ({
  form,
  setForm,
  modalConfig,
  setModalConfig
}) => {
  const { getTree, treeData } = useMenu()

  const formRef = createRef<FormInstance>()

  const changeForm = (data) => {
    setForm({ ...form, ...data })
  }

  useEffect(() => {
    getTree()
  }, [])

  const handleOk = () => {
    if (formRef.current) {
      console.log(formRef.current.submit())
      console.log(form)
    }
    // setModalConfig({ ...modalConfig, visible: false })
  }

  const handleCancel = () => {
    setModalConfig({ ...modalConfig, visible: false })
  }

  const onFinish = (values: any) => {
    console.log("Success:", values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo)
  }

  return (
    <Modal
      title={`${modalConfig.title}菜单`}
      visible={modalConfig.visible}
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
      width={600}
    >
      <Form
        name="basic"
        ref={formRef}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        initialValues={form}
      >
        <Form.Item
          label="上级菜单"
          name="parentId"
          rules={[{ required: true, message: "请选择上级菜单" }]}
        >
          <TreeSelect
            style={{ width: "100%" }}
            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
            treeData={treeData}
            placeholder="请选择上级菜单"
          />
        </Form.Item>
        <Form.Item
          label="菜单类型"
          name="menuType"
          rules={[{ required: true, message: "请选择菜单类型" }]}
        >
          <Radio.Group
            onChange={(e) => changeForm({ menuType: e.target.value })}
            value={form}
          >
            {menuType.map((item) => (
              <Radio value={item.value} key={item.label}>
                {item.label}
              </Radio>
            ))}
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="菜单图标"
          name="icon"
          rules={[{ required: true, message: "请选择菜单图标" }]}
        >
          <Input placeholder="请选择菜单类型" />
        </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item
              label="菜单名称"
              name="menuName"
              rules={[{ required: true, message: "请输入菜单名称" }]}
            >
              <Input placeholder="请输入菜单名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="显示排序"
              name="orderNum"
              rules={[{ required: true, message: "请输入显示排序" }]}
            >
              <InputNumber
                style={{ width: "100%" }}
                placeholder="请输入显示排序"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="是否外链"
              name="isFrame"
              rules={[{ required: true, message: "请选择是否外链" }]}
            >
              <Radio.Group>
                <Radio value={1}>正常</Radio>
                <Radio value={2}>停用</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="路由地址"
              name="path"
              rules={[{ required: true, message: "请输入路由地址" }]}
            >
              <Input placeholder="请输入路由地址" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="显示状态"
              name="visible"
              rules={[{ required: true, message: "请选择显示状态" }]}
            >
              <Radio.Group>
                <Radio value={1}>正常</Radio>
                <Radio value={2}>停用</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="菜单状态"
              name="status"
              rules={[{ required: true, message: "请选择菜单状态" }]}
            >
              <Radio.Group>
                <Radio value={1}>正常</Radio>
                <Radio value={2}>停用</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default EditModal
